<!-- 营业时间相关组件 -->
<template>
  <div>
    <a-form-item-rest>
      <a-card style="margin-bottom: 10px;" :style="`width:` + width + 'px'" v-for="(item, index) in thatState" :key="index">
        <div class="my-open-time">
          <CheckboxGroup class="my-open-time-week" v-model:value="item.openWeek" :options="weekData" @change="handleChange">
          </CheckboxGroup>
          
          <TimeRangePicker 
            :default-value="[dayjs(item.startTime, 'HH:mm'), dayjs(item.endTime, 'HH:mm')]" 
            @change="(_, date) => handleTimeChange(index, _, date)" format="HH:mm" 
          />
          <div class="my-delete-open-time" v-if="thatState.length > 1">
            <Button danger  @click="() => handleDeleteOpenTime(index)">
              <template #icon>
                <Icon icon="ant-design:delete-twotone" class="open-time-delete-icon" :size="16" />
              </template>
            </Button>
          </div>
        </div>
      </a-card>
      <div :style="`width:` + width + 'px' " class="my-add-time">
        <a-button type="dashed" style="width: 100%;" @click="handleAddTime">添加时间</a-button>
      </div>
    </a-form-item-rest>
  </div>
</template>

<script lang="ts" setup>
  import dayjs, { Dayjs } from 'dayjs';
  import { watch, ref, unref, PropType, onMounted, nextTick } from 'vue';
  import { Button } from 'ant-design-vue';
  import { propTypes } from '/@/utils/propTypes';
  import { Checkbox, TimePicker} from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import { isArray } from 'lodash-es';

  const CheckboxGroup = Checkbox.Group
  const TimeRangePicker = TimePicker.TimeRangePicker

  interface Options {
    label: string;
    value: string;
    fixed?: boolean | 'left' | 'right';
  }

  const weekData : Options[] = [
    {
      label: '周一',
      value: '1',
    },
    {
      label: '周二',
      value: '2',
    },
    {
      label: '周三',
      value: '3',
    },
    {
      label: '周四',
      value: '4',
    },
    {
      label: '周五',
      value: '5',
    },
    {
      label: '周六',
      value: '6',
    },
    {
      label: '周日',
      value: '7',
    },
  ]

  interface State {
    startTime?: string;
    endTime?: string;
    openWeek?: [] | any
  }
  const defaultTime : State = {
    openWeek: weekData.map(e => e.value),
    startTime: '06:00',
    endTime: '22:00',
  }
  const thatState = ref<State[]>([])
  const attrs = useAttrs();
  const props = defineProps({
    value: propTypes.oneOfType([propTypes.string]).def('[]'),
    width: propTypes.number.def(520),
  });
  const emit = defineEmits(['change', 'update:value']);
  onMounted(() => {

  })
  watch(
    () => props.value,
    () => {
      if (props.value) {
        const value = JSON.parse(props.value)
        if (value.length > 0) {
          thatState.value = value
          console.log('value', unref(thatState));
        }
        value.length === 0 && nextTick(() => { emitValue() })
      } else {
        nextTick(() => { emitValue() })
      }
      console.log('watch value', props.value);
    }, { deep: true }
  );

  const handleChange = (values) => {
    emitValue()
  }
  const handleTimeChange = (index, _, dateStr) => {
    console.log('index', index);
    
    if(isArray(dateStr) && dateStr.length == 2) {
      thatState.value[index].startTime = dateStr[0]
      thatState.value[index].endTime = dateStr[1]
    }
    emitValue()
  }

  const handleAddTime = () => {
    thatState.value.push({...defaultTime})
    emitValue()
  }

  const handleDeleteOpenTime = (index) => {
    thatState.value.splice(index, 1)
    emitValue()
  }

  const emitValue = () => {
    if (thatState.value.length === 0) {
      return
    }
    const value = JSON.stringify(unref(thatState))
    console.log('emitValue: ', value);
    
    emit('change', value);
    emit('update:value', value);
  }
</script>

<style lang="less">
.my-open-time {
  display: flex;
  flex-flow: column;
}
.my-open-time-week {
  margin-bottom: 20px;
}

.my-add-time {
  margin-top: 20px;
}

.my-delete-open-time {
  position: absolute;
  right: -40px;
  top: 0px;
  .ant-btn {
    width: 32px;
    height: 32px;
  }
}

.open-time-delete-icon {
  padding: 0px;
}
</style>
